<template>
  <div class="line-chart_wrap">
    <basic-container>
      <div class="title">增量数据趋势</div>
      <button-group class="btn"/>
      <dataEchart :opts="opts" class="chart"/>
    </basic-container>
  </div>
</template>
<script>
import ButtonGroup from '../components/buttonGroup'
import DataEchart from '../components/dataEchart'
import BasicContainer from '../common/basicContainer.vue'
export default {
  components: {
    ButtonGroup,
    DataEchart,
    BasicContainer
  },
  computed: {
    opts () {
      return {
        xAxis: {
          data: (() => {
            let arr = []
            for (let i = 0; i < 20; i++) {
              arr.push(`20/07/${10 + i}`)
            }
            return arr
          })()
        },
        series: [{
          data: (() => {
            let arr = []
            for (let i = 0; i < 20; i++) {
              arr.push(Math.random() * 10)
            }
            return arr
          })()
        }]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .line-chart_wrap{
    .title{
      font-weight: bolder;
      font-size: 16px;
      color: #212121;
      line-height: 20px;
    }
    .btn{
      margin-top: 20px;
    }
    .chart{
      margin-top: 32px;
    }
  }
</style>

